<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>办公用品管理系统</title>

    <link rel="stylesheet" href="my/bootstrap.min.css">
    <link rel="stylesheet" href="my/mystyle.css">
	<script src="my/jquery-3.1.1.min.js"></script>
    <script src="my/vue.js"></script>
	<script src="my/axios.min.js"></script>
</head>
<body>
<body style=" padding-top: 180px">
	<div class="container">
		<img src="pic/office_icon.png" alt="admin" class="center-block">
		<div class="text-center" style="margin-top: 20px;color: #337ab7;font-family: Microsoft YaHei;font-size: large">
			<h3>办公用品管理系统</h3>
		</div>
		<div class="row" style="margin-top: 20px">
			<div class="center-block" style="width:500px;" id="loginForm">
				<form class="form-horizontal" method="post" action="">
					<div class="form-group" style="margin-left: 115px">
						<div class="col-sm-8">
							<input type="text" v-model="user.user_name" class="form-control center-block" autofocus="autofocus" required="required" pattern="[a-z]+@office.com" name="admin" placeholder="企业邮箱">
						</div>
						<p style="color: red" v-if="message">* 账号或密码错误</p>
					</div>
					<div class="form-group" style="margin-left: 115px">
						<div class="col-sm-8">
							<input type="password" v-model="user.user_password" class="form-control center-block" required="required" pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$" name="adminPassword" placeholder="密码">
						</div>
					</div>
					<div class="form-group" style="margin-left: 115px">
						<div class="col-md-4">
							<input class="btn btn-primary btn-block" style="width: 236.66px" type="button" @click="userLogin" value="登录">
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>

</body>
<!--axios.js获取数据-->
<script>
	new Vue({
		el:"#loginForm",
		data:{
		    user:{ user_name:'', user_password:''},
		    message:false
		},
		methods:{
		    userLogin:function () {
		    /* s */
				var url = "/userLogin";
				var self = this;
				axios.post(url,this.user).then(function (response) {
				    var result = response.data;
				    if(result.info == "success"){
				      window.location.href="/manage"
				    }

					self.message = result.result; 
                }).catch(function(reason) {
                    self.message = true;
                })
			}
		},
	})



/*  var url = ""
	axios.get(url).then(function (response) {
		var jsonObject = response.data;
		var jsonString = JSON.stringify(jsonObject)
    })*/
</script>
</html>